<template>
  <cml-module :moduleName="$t('cmlpanel.autoLoop')"
    icon="spotlight"
    v-bind="$attrs">
    <cml-module-item v-if="$_auth.includes('focus')"
      :title="$t('cmlpanel.spotlightMode')"
      :titleMore="titleText"
      tipName='focus'>
      <a-switch size="small"
        v-model="focus" />
    </cml-module-item>
    <cml-module-item v-if="$_auth.includes('focusAuto')"
      :title="$t('cmlpanel.autoLoop')"
      :titleMore="titleText"
      tipName='focusAuto'>
      <a-switch size="small"
        v-model="autoLoop" />
    </cml-module-item>
  </cml-module>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import CmlModule from '../cml-module'
import { Switch } from 'ant-design-vue'
import CmlModuleItem from '../cml-module-item'

export default {
  name: 'focus',
  auth: ['focus, focusAuto'],
  components: {
    CmlModule,
    CmlModuleItem,
    ASwitch: Switch
  },
  model: {},
  props: {},
  data() {
    return {
      isEnter: false
    }
  },
  computed: {
    ...mapState('focus', ['isOpen', 'carousel', 'focusedId']),
    ...mapState('voiceFeedback', ['isStart']),
    titleText() {
      return this.$t('cmlpanel.customLayout')
    },
    focus: {
      get() {
        return this.isOpen
      },
      set(value) {
        this.setIsOpen(value)
      }
    },
    autoLoop: {
      get() {
        return this.carousel
      },
      set(value) {
        this.setCarousel(value)
      }
    }
  },
  watch: {
    isStart(v) {
      if (!v) {
        this.carousel && this.setCarousel(false)
      }
    },
    isOpen: {
      handler: function (value) {
        this.changeFocus(value)
      }
    },
    carousel: {
      handler: function (value) {
        this.changeSpeak(value)
      }
    }
  },

  created() {
    this.$router.onReady(() => {
      this.isEnter = true
    })
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    ...mapMutations('focus', ['setIsOpen', 'setCarousel']),
    changeFocus(value) {
      if (!this.isEnter) return
      if (value) {
        app.voiceFeedbackServer.speak(this.$t('cmlpanel.spotlightModeOn'))
        app.msg({ type: 'info', content: this.$t('cmlpanel.spotlightModeOn') })
        app.focusServer.addInfo('聚焦模式已开启')
      } else {
        if (!this.carousel) {
          app.focusServer.inactivated()
        }
        app.voiceFeedbackServer.speak(this.$t('cmlpanel.spotlightModeOff'))
        app.msg({ type: 'info', content: this.$t('cmlpanel.spotlightModeOff') })
        app.focusServer.addInfo('聚焦模式已关闭')
      }
    },
    changeSpeak(value) {
      if (!this.isEnter) return
      if (value) {
        //自动开启语音提示
        if (!app.voiceFeedbackServer.state) {
          app.voiceFeedbackServer.start()
        }
        app.msg({ type: 'info', content: this.$t('cmlpanel.autoLoopOn') })
        app.focusServer.addInfo('智能解说已开启')
        app.focusServer.carouselNum = -1
        if (!this.focusedId) {
          app.focusServer.focuseNext()
        } else {
          app.focusServer.inactivated()
        }
      } else {
        // app.voiceFeedbackServer.speak('聚焦模式轮播已关闭')
        app.focusServer.inactivated()
        app.msg({ type: 'info', content: this.$t('cmlpanel.autoLoopOff') })
        app.focusServer.addInfo('智能解说已关闭')
      }
    },
    feedback(message) {
      app.voiceFeedbackServer.speak(message)
      app.msg({ type: 'info', content: message })
      app.focusServer.addInfo(message)
    },
    feedback2(message) {
      app.msg({ type: 'info', content: message })
      app.focusServer.addInfo(message)
    }
  }
}
</script>
<style lang="scss" scoped></style>
